﻿@page "/"

@using Data
@using Telerik.Blazor.Components.Editor
@inject FileConverter fileConverter

<TelerikEditor @bind-Value="@EditorContent" Tools="@Tools" EditMode="@EditorEditMode.Div" Height="700px">
    <EditorCustomTools>
        <EditorCustomTool Name="ExportToPdfTool">
            <div style="margin-right: 50px">
                <TelerikButton OnClick="@ExportToPdf" Icon="download"></TelerikButton>
                <TelerikDropDownList Data="@SupportedExportFormats" @bind-Value="@exportFormat" PopupHeight="auto" Width="auto"></TelerikDropDownList>
            </div>
        </EditorCustomTool>
    </EditorCustomTools>
</TelerikEditor>

@* This notification is just to show the user there was a problem in case an exception is thrown,
    it is not related to the import/epoxrt and it is not required *@
<div class="notification-container">
    <TelerikAnimationContainer @ref="@FailureNotification" Width="300px" Height="200px" Top="20px" AnimationType=@AnimationType.SlideDown>
        <div class="k-widget k-popup k-notification k-notification-info">
            <h3><TelerikIcon Icon="cancel" /> Problem</h3>
            <p>
                The operation failed, there is probably something in the content that prevents the conversion. Try simplifying the content and removing images/lists.
            </p>
        </div>
    </TelerikAnimationContainer>
</div>

@code{
    string EditorContent { get; set; }
    List<IEditorTool> Tools { get; set; }

    // list of available export formats, hardcoded, but you could tie it to a method from the service
    string exportFormat { get; set; } = "pdf";
    List<string> SupportedExportFormats { get; set; } = new List<string> { "pdf", "docx", "txt", "html", "rtf" };

    // this is for the error notification only
    public TelerikAnimationContainer FailureNotification { get; set; }

    // import and custom tool registration
    protected override async Task OnInitializedAsync()
    {
        // add the custom tool for export
        Tools = new List<IEditorTool>(EditorToolSets.Default);
        Tools.Insert(0, new CustomTool("ExportToPdfTool"));

        // fetch the HTML content from import service
        EditorContent = fileConverter.GetHtmlString();
    }

    // export
    async Task ExportToPdf()
    {
        // call the export service, it will discern the details based on the extension of the exported file we want
        bool isSuccess = await fileConverter.ExportAndDownloadHtmlContent(EditorContent, $"EditoContent.{exportFormat}");
        // in case here was an issue
        if(isSuccess == false)
        {
            await ShowErrorNotification();
        }
    }


    // these are for the issue notification only
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && EditorContent == null) // denotes an exception in this sample service
        {
            await ShowErrorNotification();
        }
    }

    async Task ShowErrorNotification()
    {
        await FailureNotification.ShowAsync();

        await Task.Delay(10000);

        await FailureNotification.HideAsync();
    }
}

<style type="text/css">
    /* The specially positioned parent of the notification controls its position */
    .notification-container {
        position: fixed;
        top: 50%;
        margin-top: -100px;
        left: 50%;
        margin-left: -150px;
    }
</style>